<template>
  <div class="day10 colum-flex">
    <div class="title">You liked it <span id="times">{{times}}</span> times <i class="iconfont icon-keaide heart"></i>
    </div>
    <div class="loveMe"
      @click="clickMe">
      <i class="iconfont icon-keaide  heart"
        v-show="heartShow"
        :style="{left:left,top:top}"></i>
      <!-- <img src="@/assets/heart.svg" alt="" class="heart" v-show="heartShow" :style="{left:left,top:top}"> -->
    </div>
    <div class="tips">
      <div>background: url('...') no-repeat center center/cover;</div>
      <br />
      <div>不要用img 来做动画效果，如果用img但没用动画时，图片是正常的，一旦加了动画 背景透明效果打折扣 都是灰蒙蒙的，不清楚问题出在哪儿，用class这种方式就没问题</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const times = ref(0) //记录点击次数
const heartShow = ref(false)
const left = ref(''),
  top = ref('')

let clickTime = 0 //记录点击时的时间

function clickMe(e) {
  if (clickTime == 0) {
    //说明第一次点击 或 间隔时间太长
    clickTime = new Date().getTime()
  } else {
    if (Date.now() - clickTime < 800) {
      // 0.8s之内点击第二次 认为是双击 开启动画以及记录次数
      heartShow.value = true
      left.value = e.clientX - e.target.offsetLeft + 'px'
      top.value = e.clientY - e.target.offsetTop + 'px'
      times.value++
      clickTime = 0 //记录一次双击后重置 不然之后再双击会失效
      setTimeout(() => {
        heartShow.value = false
      }, 1000)
    } else {
      clickTime = Date.now()
    }
  }
}
</script>

<style lang="scss" scoped>
.day10 {
  .title {
    margin-bottom: 20px;
    text-align: center;
  }

  .heart {
    color: red;
  }

  .loveMe {
    height: 440px;
    width: 300px;
    background: url('../../assets/love.jpg') no-repeat center center/cover;
    cursor: pointer;
    position: relative;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    overflow: hidden;
  }

  .loveMe .heart {
    position: absolute;
    animation: grow 0.6s linear;
    transform: translate(-50%, -50%) scale(0);
  }

  @keyframes grow {
    to {
      transform: translate(-50%, -50%) scale(10);
      opacity: 0;
    }
  }
}
</style>